.mycube {
    width: 200px;
    height: 200px;
    position: relative;
    margin-top: 200px;
    margin-left: 40%;
}
.cube {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transform: rotateY(-42deg) rotateZ(20deg) rotateX(-20deg) translateZ(0px);
    animation: cube 10s linear infinite;
}
.cube div {
    width: 200px;
    height: 200px;
    position: absolute;
    box-shadow: 0 0 0 1px #000;
    border-radius: 100px;
}
.a {
    transform: rotateY(0) translateZ(100px);
    background-color: rgba(255, 0, 0, .4);
}
.b {
    transform: rotateY(180deg) translateZ(100px);
    background-color: rgba(0, 255, 0, .4);
}
.c {
    transform: rotateY(90deg) translateZ(100px);
    background-color: rgba(0, 0, 255, .4);
}
.d {
    transform: rotateX(90deg) translateZ(100px);
    background-color: rgba(255, 255, 0, .4);
}
.e {
    transform: rotateX(90deg) translateZ(-100px);
    background-color: rgba(0, 255, 255, .4);
}
.f {
    transform: rotateY(-90deg) translateZ(100px);
    background-color: rgba(255, 0, 255, .4);
}

@keyframes cube {
    100% {
        transform: rotateY(678deg) rotateZ(740deg) rotateX(-20deg) translateZ(0px);
    }
}

.cube .cube2 {
    width: 100px;
    height: 100px;
    box-shadow: 0 0 0 0;
    position: fixed;
    top: 60px;
    left: 60px;
    transform-style: preserve-3d;
    transform: rotateX(-42deg) rotateZ(20deg) rotateY(-20deg) translateZ(0);
    animation: cube2 3s linear infinite;
}
.cube2 div {
    width: 100px;
    height: 100px;
    position: absolute;
}
.g {
    transform: rotateX(0) translateZ(50px);
    background-color: rgba(255, 0, 255, .3);
}
.h {
    transform: rotateX(0) translateZ(-50px);
    background-color: rgba(0, 255, 255, .3);
}
.i {
    transform: rotateX(90deg) translateZ(50px);
    background-color: rgba(255, 255, 0, .3);
}
.j {
    transform: rotateX(90deg) translateZ(-50px);
    background-color: rgba(0, 0, 255, .3);
}
.k {
    transform: rotateY(90deg) translateZ(50px);
    background-color: rgba(0, 255, 0, .3);
}
.l {
    transform: rotateY(90deg) translateZ(-50px);
    background: rgba(255, 0, 0, .3);
}

@keyframes cube2 {
    100% {
        transform: rotateX(678deg) rotateZ(740deg) rotateX(-20deg) translateZ(0px);
    }
}

.cube2 .cube3 {
    width: 50px;
    height: 50px;
    box-shadow: 0 0 0 0;
    position: fixed;
    top: 30px;
    left: 30px;
    transform-style: preserve-3d;
    transform: rotateY(-42deg) rotateZ(20deg) rotateX(-20deg) translateZ(0px);
}
.cube3 div {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 5px;
}
.m {
    transform: rotateY(0) translateZ(25px);
    background-color: rgba(255, 0, 0, 1);
}
.n {
    transform: rotateY(0) translateZ(-25px);
    background-color: rgba(0, 255, 0, 1);
}
.o {
    transform: rotateY(90deg) translateZ(25px);
    background-color: rgba(0, 0, 255, 1);
}
.p {
    transform: rotateY(90deg) translateZ(-25px);
    background-color: rgba(255, 255, 0, 1);
}
.q {
    transform: rotateX(90deg) translateZ(25px);
    background-color: rgba(255, 0, 255, 1);
}
.r {
    transform: rotateX(90deg) translateZ(-25px);
    background-color: rgba(0, 255, 255, 1);
}